<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="物品类型">
            <!-- <el-select
              v-model="queryParams.cateId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in fuanlioptions"
                :key="item.id"
                :label="item.houseCabinet"
                :value="item.id"
              >
              </el-option>
            </el-select> -->
            <el-cascader
              v-model="cateIds"
              clearable
              :options="fuanlioptions"
              :props="{
                label: 'houseCabinet',
                value: 'id',
                children: 'children',
                checkStrictly: true
              }"
            ></el-cascader>
          </el-form-item>

          <el-form-item label="物品名称">
            <el-input
              v-model="queryParams.productName"
              placeholder="请输入仓库名称"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="仓库名称">
            <el-select
              v-model="queryParams.houseId"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in cangkuoptions"
                :key="item.id"
                :label="item.warehouseName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <div class="block">
              <el-date-picker
                v-model="queryParams.createTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change="aaa"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="结束时间">
            <div class="block">
              <el-date-picker
                v-model="queryParams.updateTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change="aaa"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="24">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['goods:add']"
              >新增</el-button
            >
            <span class="sasa">总价格 : </span>
            <el-input v-model="numlist" clearable disabled=""> </el-input>

            <span class="sasa">总件数 : </span>
            <el-input v-model="pagelist" clearable disabled=""> </el-input>
          </el-col>
        </el-row>

        <el-table
          v-loading="loading"
          :data="userList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="expand">
            <template slot-scope="props">
              <h3>物品列表</h3>
              <el-table
                :data="props.row.productsList"
                border
                :header-cell-style="{color: '#fff',background:'#409EFF'}"
                style="width: 100%"
              >
                <el-table-column
                  prop="price"
                  align="center"
                  label="单价"
                  width="width"
                >
                </el-table-column>
                <el-table-column
                  prop="unitMount"
                  label="数量"
                  align="center"
                  width="width"
                >
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            label="物品类型"
            width="225"
            align="center"
            prop="cateName"
            :show-overflow-tooltip="true"
          >
            <!-- <template slot-scope="scope">
              {{ getleixing(scope.row.cateId) }}
            </template> -->
          </el-table-column>
          <el-table-column
            label="物品名称"
            align="center"
            width="225"
            prop="productName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="储位列表"
            align="center"
            prop="cabinetName"
            width="225"
          >
            <!-- <template slot-scope="scope">
              {{ getchuweiName(scope.row.cabinetId) }}
            </template> -->
          </el-table-column>
          <el-table-column
            label="新增时间"
            align="center"
            width="225"
            prop="createTime"
            :show-overflow-tooltip="true"
          />
          <!-- <el-table-column
            label="单位"
            align="center"
            prop="units"
            v-if="columns[2].visible"
            :show-overflow-tooltip="true"
          /> -->
          <!-- <el-table-column
            label="单价"
            align="center"
            prop="price"
             width="180"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="数量"
            align="center"
            prop="unitMount"
            width="210"
          >
          </el-table-column>
          <el-table-column
            label="总价"
            align="center"
            prop="totalPrice"
            width="210"
          >
          <template slot-scope="scope">
              {{(scope.row.totalPrice = scope.row.price*scope.row.amount)}}
          </template>
          </el-table-column>> -->

          <el-table-column label="所属仓库" align="center" width="225">
            <template slot-scope="scope">
              {{ gethouseName(scope.row.houseId) }}
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            align="center"
            prop="remark"
            width="230"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['goods:add']"
                >入库</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="gochuku(scope.row)"
                v-hasPermi="['goods:add']"
                >出库</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="deleteLu(scope.row)"
                >删除</el-button
              >
              <!-- <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate1(scope.row)"
                v-hasPermi="['goods:add']"
                >编辑</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 1 新增 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="图片">
          <!-- <el-upload
          class="avatar-uploader"
          :headers="headers"
          :action="action +'/common/upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          >
          <img :src="form.picture" class="avatar" style="width: 76px; height: 76px">
        </el-upload> -->
          <el-upload
            class="avatar-uploader"
            :headers="headers"
            :show-file-list="false"
            :action="action + '/common/upload'"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.picture" :src="form.picture" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="cateId">
              <!-- <el-cascader
                placeholder="请选择"
                v-model="form.cateId"
                :options="fuanlioptions"
              ></el-cascader> -->
              <!-- <el-select v-model="form.cateId" placeholder="请选择">
                <el-option
                  v-for="item in fuanlioptions"
                  :key="item.id"
                  :label="item.houseCabinet"
                  :value="item.id"
                >
                </el-option>
              </el-select> -->
              <el-cascader
                v-model="form.cateIds"
                :options="fuanlioptions"
                :props="{
                  label: 'houseCabinet',
                  value: 'id',
                  children: 'children'
                }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="productName">
              <el-input v-model="form.productName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row> </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属仓库" prop="houseId">
              <el-select v-model="form.houseId" placeholder="请选择">
                <el-option
                  v-for="item in cangkuoptions"
                  :key="item.id"
                  :label="item.warehouseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储位列表" prop="cabinetId">
              <el-select v-model="form.cabinetId" placeholder="请选择">
                <el-option
                  v-for="item in cangkuoptions1"
                  :key="item.id"
                  :label="item.houseCabinet"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="领用人" prop="receiverName">
              <el-input v-model="form.receiverName" placeholder="请输入领用人"/>
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 规格list -->
      <div style="text-align:right">
        <el-button @click="addTable" size="small" type="waring">新增</el-button>
        <!-- <el-button @click="delTable" size="small" type="waring">删除</el-button> -->
      </div>
      <el-table :data="form.tableData" style="width: 100%">
        <el-table-column label="价格" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.price"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.unitMount"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" width="120">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.unit"
              filterable
              placeholder="单位"
              class="boxx11"
            >
              <el-option
                v-for="item in typeopentions"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="addshanchu(scope.row)" size="small" type="waring"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 2 -->
    <el-dialog
      :title="title"
      :visible.sync="opens1"
      width="700px"
      append-to-body
    >
      <el-form ref="formsa" :model="form" :rules="rules1" label-width="80px">
        <el-form-item label="图片">
          <div class="demo-image__preview">
            <!-- <el-image 
            style="width: 100px; height: 100px"
            :src="form.picture" 
            :preview-src-list="picture">
          </el-image> -->
            <el-image
              ref="preview"
              :src="form.picture"
              style="width: 100px; height: 100px"
              :preview-src-list="srcList"
            ></el-image>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="cateId">
              <!-- <el-select v-model="form.cateId" placeholder="请选择">
                <el-option
                  v-for="item in fuanlioptions"
                  :key="item.id"
                  :label="item.houseCabinet"
                  :value="item.id"
                >
                </el-option>
              </el-select> -->
              <el-cascader
                v-model="form.cateIds"
                :options="fuanlioptions"
                :props="{
                  label: 'houseCabinet',
                  value: 'id',
                  children: 'children'
                }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="productName">
              <el-input v-model="form.productName" />
            </el-form-item>
          </el-col>
          <!-- </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row> </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属仓库" prop="houseId">
              <el-select v-model="form.houseId" placeholder="请选择">
                <el-option
                  v-for="item in cangkuoptions"
                  :key="item.id"
                  :label="item.warehouseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储位列表" prop="cabinetId">
              <el-select v-model="form.cabinetId" placeholder="请选择">
                <el-option
                  v-for="item in cangkuoptions1"
                  :key="item.id"
                  :label="item.houseCabinet"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 规格list -->
      <div style="text-align:right">
        <el-button @click="addzeng" size="small" type="waring">新增</el-button>
        <el-button @click="delTable" size="small" type="waring">减少</el-button>
      </div>
      <el-table :data="form.tableData" style="width: 100%">
        <el-table-column label="价格" align="center" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总数量" align="center" width="210">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.unitMounA"
              @change="handleChange"
              label="描述文字"
              style="width:60%"
            ></el-input-number>
            <!-- </el-option>
            </el-select> -->
          </template>
        </el-table-column>
        <el-table-column label="入库数量" align="center" width="210">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.unitMount"
              @change="handleChange"
              label="描述文字"
              style="width:60%"
            ></el-input-number>
            <!-- </el-option>
            </el-select> -->
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" width="120">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.unit"
              filterable
              placeholder="单位"
              class="boxx11"
            >
              <el-option
                v-for="item in typeopentions"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForms1">确 定</el-button>
        <el-button @click="cancels1">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 3 -->
    <el-dialog
      :title="title"
      :visible.sync="opens"
      width="800px"
      append-to-body
    >
      <el-form ref="forms" :model="form" :rules="rules1" label-width="80px">
        <el-form-item label="图片">
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="form.picture"
              :preview-src-list="srcList"
            >
            </el-image>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="cateId">
              <el-select v-model="form.cateIds" :placeholder="form.cateName" disabled>
                <el-option
                  v-for="item in fuanlioptions"
                  :key="item.id"
                  :label="item.houseCabinet"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="productName">
              <el-input v-model="form.productName" disabled />
            </el-form-item>
          </el-col>
          <!-- </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row> </el-row>
        <!-- <el-col :span="12">
            <el-form-item
              label="单价"
              prop="price"
              placeholder="请输入单价"
            >
              <el-input
                type="price"
                v-model.number="form.price"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item
              label="数量"
              prop="price"
              placeholder="请输入单价"
            >
              <el-input
                type="price"
                v-model.number="form.amount"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
        </el-col> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属仓库" prop="houseId">
              <el-select v-model="form.houseId" placeholder="请选择" disabled>
                <el-option
                  v-for="item in cangkuoptions"
                  :key="item.id"
                  :label="item.warehouseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储位列表" prop="cabinetId">
              <el-select v-model="form.cabinetId" placeholder="请选择" disabled>
                <el-option
                  v-for="item in cangkuoptions1"
                  :key="item.id"
                  :label="item.houseCabinet"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="领用人" prop="receiverName">
              <el-input
                v-model="form.receiverName"
                placeholder="请输入领用人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 规格list -->
      <div style="text-align:right">
        <!-- <el-button @click="addTable" size="small" type="waring">新增</el-button>
         <el-button @click="delTable" size="small" type="waring">删除</el-button>  -->
      </div>
      <el-table :data="form.tableData" style="width: 100%">
        <el-table-column label="价格" align="center" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总数" align="center" width="150">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.unitMounF"
              :min="0"
              disabled
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="出库数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.unitMount"
              @change="handleChange"
              :max="scope.row.unitMounF"
              :min="0"
              label="描述文字"
              style="width:80%"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.unit"
              filterable
              placeholder="单位"
              disabled
              class="boxx11"
            >
              <el-option
                v-for="item in typeopentions"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="ifAdd"
              @click="addchu(scope.row, scope.$index)"
              size="small"
              type="text"
              >出库</el-button
            >
            <el-button
              v-if="scope.$index == addIndex"
              @click="del()"
              type="text"
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForms">确 定</el-button>
        <el-button @click="cancels">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <!-- <el-dialog :title="title" :visible.sync="openss" width="700px" append-to-body>
      <el-form ref="formsa" :model="formS" :rules="rules1" label-width="80px">
       <el-form-item>
          <div class="demo-image__preview">
          <el-image ref="preview" :src="formS.picture"  style="width: 100px; height: 100px" :preview-src-list="srcList"></el-image>
        </div>
       </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="cateId">
              <el-select v-model="formS.cateId" placeholder="请选择">
                <el-option
                  v-for="item in fuanlioptions"
                  :key="item.id"
                  :label="item.houseCabinet"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="productName" >
              <el-input v-model="formS.productName" />
            </el-form-item>
          </el-col>
            </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属仓库" prop="houseId">
              <el-select v-model="formS.houseId" placeholder="请选择" >
                <el-option
                  v-for="item in cangkuoptions"
                  :key="item.id"
                  :label="item.warehouseName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储位列表" prop="cabinetId">
              <el-select v-model="formS.cabinetId" placeholder="请选择">
                <el-option
                  v-for="item in cangkuoptions1"
                  :key="item.id"
                  :label="item.houseCabinet"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="formS.remark"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForms3">确 定</el-button>
        <el-button @click="cancels3">取 消</el-button>
      </div>
    </el-dialog> -->
    <!-- <div class="aaa">聊天</div> -->
    <!-- 预览 -->
    <div class="demo-image__preview">
      <!-- <el-image 
        style="width: 100px; height: 100px"
        :src="url" 
        :preview-src-list="srcList">
      </el-image> -->
    </div>
  </div>
</template>

<script>
import { storeList, addDelivery, cabinetList } from "@/api/system/stores";
import { goodsList, addGoods, delLu } from "@/api/system/list";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
// import { storeList, addStore, updataStore } from "@/api/system/stores";
export default {
  name: "User",
  components: { Treeselect },
  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      token: getToken(),
      action: process.env.VUE_APP_BASE_API,
      // 判断是否出库
      ifAdd: true,
      // 物品管理多规格list
      diaTable: [],
      munberlist: {},
      rules: {
        cateId: [{ required: true, message: "请输入类型", trigger: "blur" }],
        productName: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
        price: [
          {
            required: true,
            type: "number",
            message: "请输入单价",
            trigger: "blur"
          }
        ],
        amount: [
          {
            required: true,
            type: "number",
            message: "请输入数量",
            trigger: "blur"
          }
        ],
        unit: [
          {
            required: true,
            message: "请选择单位",
            trigger: "blur"
          }
        ]
        //  houseId: [
        //   { required: true, message: '请输入所属仓库', trigger: 'blur' },
        // ],
        // cabinetId:[
        //   {required: true, message: '请输入所属储位', trigger: 'blur'}
        // ]
      },
      rules1: {
        amount: [
          {
            required: true,
            type: "number",
            message: "请输入数量",
            trigger: "blur"
          }
        ],
        receiverName: [
          {
            required: true,
            message: "请输入领用人",
            trigger: "blur"
          }
        ]
      },
      labelPosition: "1",
      list: [],
      // 物品类型选项
      fuanlioptions: [],
      cangkuoptions: [],
      cangkuoptions1: [],
      typeopentions: [],
      options: [],
      optionStore: [],
      numlist: '',
      pagelist: '',
      // 遮罩层
      loading: true,
      isLoading: false,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      // userList: [{
      //   type: '类型A', userName: '商品A',
      //   units: '赛派思', price: '88', count: '10', totalPrice: '880',
      //   whichStore: '赛派思', addPeople: '张三'
      // },],
      userList: [],
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      opens: false,
      opens1: false,
      openss: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 性别状态字典
      timeOptions: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
      formS: {},
      form: {
        houseName: "",
        cateName: "",
        productName: "",
        houseId: "",
        unit: "",
        cateIds: [],
        cateId: '',
        amount: "",
        price: "",
        remark: "",
        receiverName: "",
        productId: "",
        cabinetId: "",
        content: [],
        newContent: [],
        picture: ""
      },
      addContent: [],
      num: 0,
      tableData: [{}],
      tableData1: [{}],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0
      },
      cateIds: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: "",
        houseId: undefined,
        cateId: '',
        unit: undefined,
        createTime: "",
        updateTime: "",
        type: 2
      },
      // 列信息
      columns: [
        { key: 0, label: `类型`, visible: true },
        { key: 1, label: `名称`, visible: true },
        { key: 2, label: `单位`, visible: true },
        { key: 3, label: `单位`, visible: true },
        { key: 4, label: `数量`, visible: true },
        { key: 5, label: `总价`, visible: true },
        { key: 6, label: `所属仓库`, visible: true },
        { key: 7, label: `添加人`, visible: true },
        { key: 8, label: `备注`, visible: true }
      ],

      srcList: []
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    console.log(this.form, "1");
    this.getList();
    this.cangku();
    this.chuwei();
    this.cabinetList();
    this.getDicts("goodType").then(res => {
      // 露露
      this.fuanlioptions = res.data;
      console.log(res);
    });
    this.getDicts("wutype").then(res => {
      this.typeopentions = res.data;
      console.log(res);
    });
  },
  computed: {},
  methods: {
    // 取消目前出库
    del() {
      this.ifAdd = true;
      this.addIndex = -1;
      this.form.amount = "";
      this.form.price = "";
    },
    deleteLu(row) {
      this.$confirm("确定要删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delLu(row.id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
          this.getList();
        });
    },

    handleChange() {
      console.log(11);
    },
    addshanchu(row) {
      console.log(row);
      this.form.content.splice(row, 1);
    },
    addchu(row, index) {
      this.addIndex = index;
      this.ifAdd = false;
      this.form.amount = row.unitMount;
      this.form.price = row.price;
    },
    // 添加规格
    addTable() {
      let data = {
        price: "",
        unitMount: ""
      };
      this.form.tableData.push(data);
    },
    addzeng() {
      let data = {
        price: "",
        unitMount: ""
      };
      this.form.tableData.push(data);
    },
    // 管理
    cabinetList() {
      cabinetList(this.queryParams).then(res => {
        // 露露
        if (res.code == 200) {
          this.fuanlioptions = res.rows;
        }
      });
    },
    // 删除规格
    delTable() {
      this.form.tableData.splice(-1);
    },
    // typeFormat(row, column) {
    //   return this.selectDictLabel(this.fuanlioptions, row.cateId);
    // },
    // typeFormat1(row, column) {
    //   return this.selectDictLabel(this.typeopentions, row.unit);
    // },
    gethouseName(v) {
      var bbb = this.cangkuoptions.find(function(item) {
        return item.id == v;
      });
      if (bbb) return bbb.warehouseName;
    },
    getchuweiName(v) {
      var aaa = this.cangkuoptions1.find(function(item) {
        return item.id == v;
      });
      if (aaa) return aaa.houseCabinet;
    },
    getleixing(v) {
      var aaa = this.fuanlioptions.find(function(item) {
        return item.id == v;
      });
      if (aaa) return aaa.houseCabinet;
    },
    aa() {
      ro;
    },
    // 打开出库弹窗
    gochuku(row) {
      this.title = "出库";
      this.form = row;
  
      this.addIndex = -1;
      this.ifAdd = true;
      this.form.tableData = row.productsList;
      this.form.tableData = this.form.tableData.map(item => {
        return {
          amount: item.amount,
          cabinetId: item.cabinetId,
          cateId: item.cateId,
          cateName: item.cateName,
          content: item.content,
          createBy: item.createBy,
          createTime: item.createBy,
          dataScope: item.dataScope,
          dele: item.dele,
          deptId: item.depId,
          houseId: item.houseId,
          houseName: item.houseName,
          id: item.id,
          params: item.params,
          price: item.price,
          productName: item.productName,
          productsList: item.productsList,
          remark: item.remark,
          searchValue: item.searchValue,
          unit: item.unit,
          unitMount: item.unitMount - 0,
          unitMounF: item.unitMount - 0,
          updateBy: item.updateBy,
          updateTime: item.updateTime,
          updateUserId: item.updateUserId,
          updateUserName: item.updateUserName,
          userId: item.userId,
          userName: item.userName,
          picture: item.userName
        };
      });
      // let arr = JSON.parse(JSON.stringify(row.cateId.split(',')))
      // arr.forEach((item, index) =>{ 
      //   arr.splice(index, 1,Number(item))
      // })
      // this.form.cateIds = arr
      console.log(this.form.cateIds);
      console.log(this.form);
      this.opens = true;
    },
    cancels() {
      this.opens = false;
    },
    cancels1() {
      this.opens1 = false;
    },
    submitForms() {
      if (!this.ifAdd) {
        let a = [];
        a.push(this.form.tableData[this.addIndex]);
        let i = a.map(item => {
          return {
            price: item.price,
            unit: item.unit,
            unitMount: Number(item.unitMounF) - Number(item.unitMount),
            unitMounF: item.unitMounF
          };
        });
        console.log(i);
        let b = this.form.tableData[this.addIndex].unitMount;
        this.form.tableData = this.form.tableData.map(item => {
          return {
            price: item.price,
            unit: item.unit,
            unitMount: item.unitMount,
            unitMounF: item.unitMounF
          };
        });
        // this.form.content[this.addIndex] = {
        //     price:item.price,
        //     unit:item.unit,
        //     unitMount: Number(item.unitMounF) - Number(item.unitMount),
        //     unitMounF:item.unitMounF
        // }
        console.log(this.form.tableData);
        this.form.tableData[this.addIndex] = i[0];
        let data = {
          content: JSON.stringify(this.form.tableData),
          price: this.form.price,
          productId: this.form.id,
          amount: b,
          cateId: this.form.cateId,
          cateName: this.form.cateName,
          houseName: this.form.houseName,
          houseId: this.form.houseId,
          productName: this.form.productName,
          unit: this.form.content[this.addIndex].unit,
          receiverName: this.form.receiverName,
          remark: this.form.remark,
          cabinetId: this.form.cabinetId
        };
        console.log(data);
        this.$refs["forms"].validate(valid => {
          if (valid) {
            addDelivery(data).then(res => {
              console.log(res);
              this.msgSuccess("出库成功");
              this.opens = false;
              this.getList();
            });
          }
        });
      } else {
        this.$message.error("必须选择出库哦，亲");
      }
      // console.log(this.form)
    },
    chuwei() {
      let data = {
        pageNum: this.form.pageNum,
        pageSize: this.form.pageSize,
        productName: this.form.productName,
        houseId: this.form.houseId,
        cateId: this.form.cateId,
        unit: this.form.unit,
        createTime: this.form.createTime,
        updateTime: this.form.updateTime,
        type: 1
      };
      cabinetList(data).then(res => {
        console.log(res, "-----------chuwei------------");
        this.cangkuoptions1 = res.rows;
      });
    },
    cangku() {
      storeList().then(res => {
        console.log(res, "-----------仓库列表------------");
        this.cangkuoptions = res.rows;
      });
    },
    /** 查询物品列表 */
    getList() {
      this.loading = true;
      let arr = JSON.parse(JSON.stringify(this.cateIds))
      this.queryParams.cateId = arr.join();
      console.log(this.queryParams.cateId);
      goodsList(this.queryParams).then(res => {
        this.userList = res.rows;
        this.total = res.total;
        this.loading = false;
        this.numlist = res.sumNum;
        this.pagelist = res.statisticsType;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.getList();
    },
    // 表单重置
    reset() {
      this.forms = {
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log(1234);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    aaa(e) {
      console.log(e);
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        productName: "",
        houseId: undefined,
        cateId: []
      }),
        this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.form = {
        houseName: "",
        cateName: "",
        productName: "",
        houseId: "",
        unit: "",
        cateId: [],
        remark: "",
        receiverName: "",
        productId: "",
        cabinetId: "",
        content: [],
        tableData: [],
        picture: ""
      };
      this.open = true;
      this.title = "添加物品";
    },
    /** 入库按钮操作 */
    handleUpdate(row) {
      // console.log(77777, row);
      const userId = row.userId || this.ids;
      this.title = "添加物品";
      this.srcList.push(row.picture);
      let arr = JSON.parse(JSON.stringify(row.cateId.split(',')))
      arr.forEach((item, index) =>{ 
        arr.splice(index, 1,Number(item))
      })
      this.form = {
        houseName: row.houseName,
        cateName: row.cateName,
        productName: row.productName,
        houseId: row.houseId,
        unit: row.unit,
        cateIds: arr,
        remark: row.remark,
        receiverName: row.receiverName,
        productId: row.productId,
        cabinetId: row.cabinetId,
        content: [],
        tableData: row.productsList,
        id: row.id,
        picture: row.picture
      };
      this.form.tableData = this.form.tableData.map(item => {
        return {
          // amount: item.amount,
          // cabinetId: item.cabinetId,
          // cateId: item.cateId,
          // cateName: item.cateName,
          // content: item.content,
          // createBy: item.createBy,
          // createTime: item.createBy,
          // dataScope: item.dataScope,
          // dele: item.dele,
          // deptId: item.depId,
          // houseId: item.houseId,
          // houseName: item.houseName,
          // id: item.id,
          // params: item.params,
          // productName: item.productName,
          // productsList: item.productsList,
          // remark: item.remark,
          // searchValue: item.searchValue,
          price: item.price,
          unit: item.unit,
          unitMount: 0,
          unitMounA: item.unitMount
          // updateBy: item.updateBy,
          // updateTime: item.updateTime,
          // updateUserId: item.updateUserId,
          // updateUserName: item.updateUserName,
          // userId:item.userId,
          // userName: item.userName,
        };
      });
      // console.log(this.form);
      // this.addContent = JSON.parse(JSON.stringify(row.productsList))
      // this.getList();
      this.opens1 = true;
      this.reset();
    },

    /** 提交按钮 */
    submitForms1() {
      this.form.newContent = this.form.tableData.map(item => {
        return {
          price: item.price,
          unit: item.unit,
          unitMount: item.unitMount
        };
      });
      this.form.content = this.form.tableData.map(item => {
        return {
          price: item.price,
          unit: item.unit,
          unitMount: Number(item.unitMount) + Number(item.unitMounA)
        };
      });
      this.form.content = JSON.stringify(this.form.tableData);
      this.form.newContent = JSON.stringify(this.form.newContent);
      this.$refs["formsa"].validate(valid => {
        if (valid) {
          addGoods(this.form).then(res => {
            console.log(res);
            this.msgSuccess("添加成功");
            this.opens1 = false;
            this.getList();
          });
        }
      });
      // console.log(this.form)
    },
    // 照片成功回调
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res)
      if (res.code == 200) {
        this.form.picture = "http://112.31.71.84:30080" + res.url;
        console.log(this.form.picture);
        this.$message.success("上传成功");
      }
    },
    submitForm() {
      console.log(this.form.tableData);
      this.form.content = JSON.stringify(this.form.tableData);
      let arr = JSON.parse(JSON.stringify(this.form.cateIds))
      this.form.cateId = arr.join(",");
      // return false
      this.$refs["form"].validate(valid => {
        if (valid) {
          addGoods(this.form).then(res => {
            this.msgSuccess("添加成功");
            this.open = false;
            this.getList();
          });
        }
      });
    }
    //   submitForms3(){
    //     addGoods(this.formS).then(res=>{
    //       console.log(res)
    //     })
    //   },
    //   cancels3(){
    //     this.openss = false
    //   },
  },
  mounted() {
    this.list = this.options.map(item => {
      return {
        dictLabel: `dictLabel:${item.dictLabel}`,
        label: `label:${item.dictLabel}`,
        dictValue: `dictValue:${item.dictValue}`
      };
    });
  }
};
</script>
<style>
.priceSpan {
  margin-right: 20px;
}
.table,
.stand {
  padding: 40px;
}
.table {
  height: 100%;
}
.add {
  margin-top: 20px;
}
.attr {
  margin-bottom: 10px;
}
.el-input {
  width: auto;
}
.aaa {
  text-decoration: line-through;
}
.putt {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}
.append {
  width: 50px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin-right: 5px;
}
.append1 {
  width: 50px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin-right: 10px;
}
.title {
  background-color: bisque;
  margin-right: 10px;
}
.close {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: burlywood;
  border-radius: 50%;
  line-height: 15px;
  text-align: center;
  right: -5px;
  top: -5px;
}
ul li {
  list-style: none;
}
.el-upload-dragger {
  width: initial;
  height: initial;
  border: 0;
  border-radius: 0;
  background-color: initial;
  overflow: auto;
}
.image-upload-container .el-image {
  vertical-align: middle;
  margin: 0 5px;
  width: 30px;
  height: 30px;
}

.image-upload-container .images-upload,
.el-button {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
}
.sasa {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  margin-left: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
